<template>
  <view class="w100  pl-30 pr-30 pb-30">
    <view v-if="!type">
      <uni-card>
        <view class="inforClass">试卷信息:</view>
        <view class="rowsb rowsm mt-10 fs-26">
          <text class="fw-600">试卷名称：</text>
          <uni-tooltip :content="itemData.name" placement="top" style="flex: 1">
            <view class="ellipsis-text">{{ itemData.name }}</view>
          </uni-tooltip>
        </view>
        <view class="rowsb rowsm mt-10 fs-24">
          <view class="ellipsis-text">
            <text class="fw-600 fs-26">实践课程：</text>
            <text>
              <!-- {{ itemData.practiceType == 1 ? '劳动教育' : itemData.practiceType == 2 ? '职业素养' :
                itemData.practiceType
                  == 3 ? '应急安全' : itemData.practiceType == 4 ? '思政实践' : '创新创业' }} -->
              {{ (practiceTypeList.find(v => v.value == itemData.practiceType) || {}).name }}
            </text>
          </view>
          <view class="ellipsis-text">
            <text class="fw-600">积分上限：</text>
            <text>{{ itemData.score }}</text>
          </view>
        </view>
        <view class="rowsb rowsm mt-10 fs-24">
          <uni-tooltip :content="proxyNameList.join(',')" placement="top">
            <view class="ellipsis-text">
              <text class="fw-600 fs-26"> 学院：</text>
              <text>{{ proxyNameList.join(',') }}</text>
            </view>
          </uni-tooltip>
          <uni-tooltip :content="prozyNameList.join(',')" placement="top">
            <view class="ellipsis-text">
              <text class="fw-600 fs-26"> 专业：</text>
              <text> {{ prozyNameList.join(',') }}</text>
            </view>
          </uni-tooltip>
        </view>
        <view class="rowsb rowsm mt-10 fs-24">
          <uni-tooltip :content="probjNameList.join(',')" placement="top">
            <view class="ellipsis-text">
              <text class="fw-600 fs-26"> 班级：</text>
              <text>{{ probjNameList.join(',') }}</text>
            </view>
          </uni-tooltip>
          <uni-tooltip :content="itemData.faceNj" placement="top">
            <view class="ellipsis-text">
              <text class="fw-600 fs-26"> 年级：</text>
              <text>{{ itemData.faceNj || '全部' }}</text>
            </view>
          </uni-tooltip>
        </view>
        <view class="rowsb rowsm mt-10 fs-24">
          <view class="ellipsis-text">
            <text class="fw-600 fs-26"> 考试时长：</text>
            <text>{{ itemData.allTime }}分钟</text>
          </view>
          <view class="ellipsis-text">
            <text class="fw-600 fs-26"> 试卷状态：</text>
            <text>{{ itemData.status == 0 ? '未发布' : itemData.status == 1 ? '未开始' : itemData.status == 2 ? '进行中' : '已结束'
            }}</text>
          </view>
        </view>
        <view class="fs-24 mt-10">
          <text class="fw-600 fs-26"> 考试时间：</text>
          <text>{{ itemData.startTime.slice(0, 10) }} ~ {{ itemData.endTime.slice(0, 10) }}</text>
        </view>
        <view class="rowsb rowsm mt-10 fs-24">
          <view class="ellipsis-text">
            <text class="fw-600 fs-26"> 发布时间：</text>
            <text>{{ (itemData.releaseTime || '').slice(0, 16) }}</text>
          </view>
        </view>
        <view class="fs-26 mt-10">
          本次知识问答单选题{{ itemData.selectNumber }}道、判断题{{ itemData.judgeNumber }}道、多选题{{ itemData.multipleNumber }}道，
          一共{{ itemData.selectNumber + itemData.judgeNumber + itemData.multipleNumber }}道题目。
        </view>
      </uni-card>
    </view>
    <uni-card>
      <view class="inforClass">试题预览:</view>
      <view class="item" v-for="(item, index) in problemList" :key="index">
        <view class="fs-30 mt-20 mb-20 col333 u-border-top pt-16" style="display: flex">
          {{ index + 1 }}. {{ item.type == 1 ? '单选题' : item.type == 2 ? '判断题' : '多选题' }}
          ({{ item.type == 1 ? selectScore : item.type == 2 ? judgeScore : multipleScore }}分)
        </view>
        <view class="contentClass" v-html="item.questionContent"></view>
        <view v-for="(it, index) in item.questionBankOptionList" :key="index">
          <view class="answer" style="display: flex">
            <view style="width: 9%;">
              <view class="unchecked" :class="it.answer == 1 ? 'active' : ''"> {{ it.name }}</view>
            </view>
            <view class="ml-10" v-html="it.content"></view>
          </view>
        </view>
        <view class="mb-20 mt-20 fs-26 mb-20">
          <view style="display: flex;">
            <view class="fs-28 mr-10"> 正确答案: </view>
            <view> {{ item.answerList.join('、') }} </view>
          </view>
          <view style="display: flex;">
            <view class="fs-28 mr-10" style="white-space: nowrap;"> 解析: </view>
            <view v-html="item.answerAnalysis"></view>
          </view>
        </view>
      </view>
    </uni-card>
    <view class="w100 rowsa rowsm mt-50 mb-20" style="bottom: 100rpx;" v-if="type">
      <view class="w-202 h-84 br-42 rowsc rowsm colfff" style="background: linear-gradient(to bottom,#ff4949,#ff4949);"
        v-if="permissions.find(v => v == '*:*:*') || permissions.find(v => v == 'project:paper:remove')"
        @click="deletBtn">删除
      </view>
      <view class="w-202 h-84 br-42 rowsc rowsm colfff" style="background: linear-gradient(to bottom,#64606b,#64606b);"
        @click="submit('保存')">保存</view>
      <view class="w-202 h-84 br-42 rowsc rowsm colfff" style="background: linear-gradient(to bottom,#4897FF,#4878FF);"
        v-if="permissions.find(v => v == '*:*:*') || permissions.find(v => v == 'project:paper:publish')"
        @click="submit('发布')">发布</view>
    </view>
  </view>
</template>
<script>
import { Base64 } from 'js-base64';
export default {
  data() {
    return {
      type: null,
      problemList: [],
      itemData: {},
      analyzeId: null,
      prozyNameList: [],
      proxyNameList: [],
      probjNameList: [],
      selectScore: 0,
      judgeScore: 0,
      multipleScore: 0,
      permissions: [],
      practiceTypeList: []
    }
  },
  onLoad(e) {
    if (uni.getStorageSync('flag') == 'teacher') {
      this.$tools.axiosFromToken('POST', 'sysUser/getById', {}, '加载中').then(res => {
        if (res.code != 200) return this.$tools.showtt(res.msg)
        let getAllInfo = { ...res.data, user: JSON.parse(Base64.decode(res.data.user)) }
        uni.setStorageSync('getInfo', getAllInfo);
        this.permissions = res.data.permissions.flat() || [];
      })
    }
    // this.permissions = uni.getStorageSync('getInfo').permissions.flat() || [];
    this.type = e.type;
    this.itemData = e.item ? JSON.parse(e.item) : null;
    this.analyzeId = this.itemData ? this.itemData.id : e.id;
    this.selectScore = this.itemData ? this.itemData.selectScore : e.selectScore;
    this.judgeScore = this.itemData ? this.itemData.judgeScore : e.judgeScore;
    this.multipleScore = this.itemData ? this.itemData.multipleScore : e.multipleScore;
    this.getTypeCongfigList();
    this.getInfo();
    if (this.itemData) {
      this.getListProxy();
      this.getListProzy();
      this.getListProbj();
    }
    uni.setNavigationBarTitle({
      title: '知识问答详情'
    })
  },
  created() {
  },
  methods: {
    getTypeCongfigList() {
      this.$tools.axiosFromToken('GET', 'project/practice/type/config/list?pageNum=1&pageSize=50', {}, '加载中').then(res => {
        if (res.code != 200) return this.$tools.showtt(res.msg)
        res.rows.forEach(item => {
          this.practiceTypeList.push({ name: item.name, value: item.id })
        })
      })
    },
    getInfo() {
      this.$tools.axiosFromToken('POST', 'teacher/test/paper/user/getTestPaperInfo', { id: this.analyzeId }, '加载中').then(res => {
        if (res.code != 200) return this.$tools.showtt(res.msg)
        this.problemList = res.data;
        this.problemList.forEach(item => {
          item.answerList = [];
          item.questionBankOptionList.forEach(it => {
            if (it.answer == 1) {
              item.answerList.push(it.name)
            }
          })
        })
      })
    },

    // 查询学院
    getListProxy() {
      this.$tools.axiosFromToken('GET', 'project/proxy/listTotal', {}, '加载中').then(res => {
        if (res.code != 200) return this.$tools.showtt(res.msg)
        // this.proxyList = res.rows;

        this.proxyNameList = [];
        res.rows.forEach(v => {
          this.itemData.faceXy.split(',').forEach(y => {
            if (v.id == y) {
              this.proxyNameList.push(v.name)
            }
          })
        })
      })
    },

    getListProzy() {
      this.$tools.axiosFromToken('GET', 'project/prozy/listTotal', {}, '加载中').then(res => {
        if (res.code != 200) return this.$tools.showtt(res.msg)
        // this.prozyList = res.rows;
        this.prozyNameList = [];
        res.rows.forEach(v => {
          this.itemData.faceZy.split(',').forEach(y => {
            if (v.id == y) {
              this.prozyNameList.push(v.name)
            }
          })
        })
      })
    },
    getListProbj() {
      this.$tools.axiosFromToken('GET', 'project/probj/listTotal', {}, '加载中').then(res => {
        if (res.code != 200) return this.$tools.showtt(res.msg)
        // this.probjList = res.rows;
        this.probjNameList = [];
        res.rows.forEach(v => {
          this.itemData.faceBj.split(',').forEach(y => {
            if (v.id == y) {
              this.probjNameList.push(v.name)
            }
          })
        })
      })
    },

    deletBtn() {
      uni.showModal({
        title: '确认删除',
        content: `是否删除刚生成的试卷,删除后学生无法查看试卷`,
        success: (res) => {
          if (res.confirm) {
            this.$tools.axiosFromToken('DELETE', `project/paper/${this.analyzeId}`, {}, '加载中').then(res => {
              if (res.code != 200) return this.$tools.showtt(res.msg);
              uni.navigateBack({
                delta: 1
              });
            })
          } else if (res.cancel) {
            // 用户点击了“取消”
            console.log('取消删除');
          }
        }
      });
    },
    submit(type) {
      if (type == '保存') {
        this.$tools.showtt('保存成功');
        uni.navigateBack({
          delta: 2
        });
      } else {
        this.$tools.axiosFromToken('PUT', `project/paper`, { status: 1, id: this.analyzeId }, '加载中').then(res => {
          if (res.code != 200) return this.$tools.showtt(res.msg);
          uni.navigateBack({
            delta: 2
          });
        })
      }
    }
  }
}
</script>
<style lang="scss">
page {
  background-color: #f4f5f7;
  padding-bottom: 10rpx;
}

::v-deep .uni-card {
  margin-left: 5px !important;
  margin-right: 5px !important;
  overflow: visible;
}

::v-deep .uni-card__content {
  color: #000 !important;
}

.answer {
  padding: 24rpx;
  background: #f4f8fb;
  margin-bottom: 40rpx;
  font-size: 26rpx;
  color: #333;
  border-radius: 20rpx;
}

.unchecked {
  width: 40rpx;
  height: 40rpx;
  border-radius: 50%;
  text-align: center;
  margin-right: 10rpx;
  line-height: 1;
  padding-top: 4px;
  border: 2rpx solid #ced1d5;
  color: #bebebe;
}

.active {
  background: #08c67f;
  border: 0;
  color: #fff;
}

::v-deep .uni-tooltip {
  width: 50%;
  display: flex;
}

::v-deep .uni-tooltip-popup {
  top: 20px;
  right: 0;
  text-align: justify;
  word-wrap: break-word;
}

.ellipsis-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  display: inline-block;
}

.inforClass {
  font-size: 16px;
  font-weight: 700;
  display: flex;
  align-items: center;
  margin: 8px 0;
}

.inforClass::before {
  content: '';
  width: 5px;
  height: 20px;
  background-color: #007AFF;
  margin-right: 5px;
  display: inline-block;
}

.contentClass {
  ::v-deep p {
    font-size: 16px;
    font-weight: 500 !important;
    padding-bottom: 5px;
  }
}
</style>